<template>
    <div>
      <header>
        <router-link to="/" class="back-btn"><van-icon name="arrow-left" /></router-link>
        <router-link to="/" class="share"><van-icon name="share-o" /></router-link>
      </header>
      <main>
        <van-swipe @change="onChange" :autoplay="3000">
          <van-swipe-item v-for="(item, index) in imageList" :key="index">
            <img :src="item.img_url" alt="" />
          </van-swipe-item>
          <template #indicator>
            <div class="custom-indicator">{{ current + 1 }} / {{ imageList.length }}</div>
          </template>
        </van-swipe>
        <div class="price">¥{{ price }}</div>
  
        <div class="promo-banner">
          <span>预计得{{ Math.floor(price * 0.1) }}米金</span>
          <span>更多优惠 &gt;</span>
        </div>
  
        <h1 class="product-title">{{ productName }}</h1>
  
        <ul class="feature-list">
          <li v-for="(feature, index) in features" :key="index">{{ feature }}</li>
        </ul>
  
        <div class="specs">
          <div class="spec-item" v-for="(spec, index) in specs" :key="index">
            <div class="spec-icon"></div>
            <div class="spec-name">{{ spec.name }}</div>
            <div class="spec-value">{{ spec.value }}</div>
          </div>
        </div>
  
        <div class="offer-banner">
          <div>
            <span class="offer-tag">超值换购</span>
            <span class="offer-link">加179.0元得建议零售价269元Xiaomi 12... &gt;</span>
          </div>
          <div>
            <span class="purchase-guide">购机攻略</span>
            <span>K70系列｜购机福利活动及规则</span>
          </div>
        </div>
  
        <div class="selected-model">
          <div>
            <div>已选 {{ productName }} {{ selectedStorage }}</div>
            <div class="text-sm text-gray">可选增值服务</div>
          </div>
          <span>&gt;</span>
        </div>
  
        <div class="color-options">
          <div v-for="(color, index) in colorOptions" :key="index" class="color-option"
            :style="{ backgroundColor: color }">
          </div>
          <div class="text-sm text-gray">共{{ colorOptions.length }}种<br />颜色可选</div>
        </div>
  
        <div class="address-section">
          <div>
            <span class="icon"></span>
            <span>地址</span>
          </div>
          <div class="text-sm text-gray">北京 北京市 海淀区 清河街道 &gt;</div>
        </div>
  
        <div class="text-sm">
          <span class="icon"></span>
          <span class="text-orange">有现货</span>
          <span class="text-gray">今天23点前付款，预计9月27日送达</span>
        </div>
  
        <div class="service-section">
          <div>服务</div>
          <div class="text-sm text-gray">小米自营 小米发货 &gt;</div>
        </div>
  
        <div class="text-xs text-gray">7天无理由退货（门店闪送，自提拆封后不支持）</div>
      </main>
  
      <footer>
        <van-goods-action>
          <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
          <router-link to="/CartView">
            <van-goods-action-icon icon="cart-o" text="购物车" :badge="cartItemCount" />
          </router-link>
          <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
          <van-goods-action-button type="warning" @click="addToCart" text="加入购物车" />
          <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
      </footer>
    </div>
  </template>
  
  <script>
  import { Toast } from 'vant';
  import { detail } from '@/api/index'
  
  export default {
    data() {
      return {
        details: [],
        current: 0,
        id: 123456,
        imageList: [
          { img_url: 'https://img.alicdn.com/imgextra/i4/1759650000/O1CN0111111b1bK701b1bK7_!!1759650000.jpg' },
        ],
        specs: [
          { name: "手机名字", value: "Redmi K70" },
          { name: "CPU", value: "第二代骁龙8" },
          { name: "三摄像头", value: "5000万像素主摄" },
          { name: "超大屏", value: "6.67英寸" },
          { name: "屏幕分辨率", value: "3200x1440" },
          { name: "极速畅玩", value: "最高16GB" }
        ],
        colorOptions: ['#000', '#FFA500', '#87CEEB', '#DDA0DD'],
        cartItemCount: 0,
        price: 2299,
        productName: 'Redmi K70',
        selectedStorage: '12GB+256GB',
        features: [
          "【旗舰性能】第二代骁龙8 旗舰芯，性能新升级",
          "【旗舰屏幕】第二代高端2K中国屏，全面升级",
          "【旗舰质感】超细四窄边，哑光金属中框"
        ],
      };
    },
    async created() {
      const id = this.$route.query.id;
      this.id = id || this.id;
      console.log(this.$route.query.id);
  
      try {
        const content = await detail({ id: this.id });
        const { code, data } = content;
        if (code === 0) {
          this.details = data;
          this.imageList = data.goods_info[1].gallery_v3;
          this.productName = data.goods_info[0].name || this.productName;
          this.price = data.goods_info[0].price || this.price;
        }
      } catch (error) {
        console.error("获取详情失败:", error);
      }
  
      this.updateCartItemCount();
    },
    methods: {
      onChange(index) {
        if (index >= 0 && index < this.imageList.length) {
          this.current = index;
        } else {
          console.error("Index out of bounds");
        }
      },
      addToCart() {
        const productData = {
          id: this.id,
          name: this.productName,
          price: this.price,
          image: this.imageList[0].img_url,
          quantity: 1,
          selected: false,
        };
        let cart = JSON.parse(localStorage.getItem('SKY_CART_DATA') || '[]');
        const existingItemIndex = cart.findIndex(item => item.id === productData.id);
        if (existingItemIndex > -1) {
          cart[existingItemIndex].quantity += 1;
        } else {
          cart.push(productData);
        }
        localStorage.setItem('SKY_CART_DATA', JSON.stringify(cart));
        this.updateCartItemCount();
        Toast.success('已加入购物车');
      },
      updateCartItemCount() {
        const cart = JSON.parse(localStorage.getItem('SKY_CART_DATA') || '[]');
        this.cartItemCount = cart.reduce((total, item) => total + item.quantity, 0);
      },
    }
  };
  </script>
  
  <style lang="less" scoped>
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
  }
  
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    background-color: rgba(255, 255, 255, 0.4);
    z-index: 1;
    color: #a69a9a;
  
    .back-btn {
      width: 24px;
      height: 24px;
      border: 1px solid #e0e0e0;
      border-radius: 5px;
      text-align: center;
      line-height: 24px;
      padding-right: 2px;
    }
  
    .share {
      width: 24px;
      height: 24px;
      border: 1px solid #e0e0e0;
      border-radius: 5px;
      text-align: center;
      line-height: 24px;
      padding-left: 1px;
    }
  }
  
  main {
    padding-top: 44px;
    padding-bottom: 50px;
  
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  
    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      background-color: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
    }
  }
  
  .price {
    font-size: 27px;
    font-weight: bold;
    padding: 0 16px;
    margin: 12px 0;
    color: #ff6900;
  }
  
  .promo-banner {
    background-color: #fff2e5;
    color: #ff6900;
    padding: 8px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin: 12px 16px;
  }
  
  .product-title {
    font-size: 20px;
    font-weight: bold;
    margin: 12px 16px;
    padding: 0 3px;
  }
  
  .feature-list {
    list-style-type: none;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 14px;
  }
  
  .feature-list li {
    margin-bottom: 4px;
    position: relative;
    padding-left: 15px;
  }
  
  .feature-list li::before {
    content: "•";
    color: #999;
    position: absolute;
    left: 0;
  }
  
  .specs {
    display: flex;
    justify-content: space-between;
    text-align: center;
    font-size: 12px;
    margin: 16px;
    flex-wrap: wrap;
  }
  
  .spec-item {
    flex: 0 0 33.333%;
    margin-bottom: 12px;
  }
  
  .spec-icon {
    width: 24px;
    height: 24px;
    margin: 0 auto 4px;
    background-color: #f0f0f0;
    border-radius: 50%;
  }
  
  .spec-name {
    color: #333;
  }
  
  .spec-value {
    color: #999;
  }
  
  .offer-banner {
    background-color: #fff2e5;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 12px;
    margin: 12px 16px;
  }
  
  .offer-tag {
    background-color: #ff6900;
    color: white;
    padding: 2px 4px;
    border-radius: 2px;
    font-size: 10px;
  }
  
  .offer-link {
    color: #ff6900;
  }
  
  .purchase-guide {
    border: 1px solid #ff6900;
    color: #ff6900;
    padding: 2px 4px;
    border-radius: 2px;
    font-size: 10px;
    display: inline-block;
    margin-right: 8px;
  }
  
  .selected-model {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 16px;
    font-size: 14px;
    padding: 12px;
    background-color: #f9f9f9;
    border-radius: 8px;
  }
  
  .color-options {
    display: flex;
    gap: 8px;
    margin: 12px 16px;
    align-items: center;
  }
  
  .color-option {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
  }
  
  .address-section,
  .service-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 16px;
    font-size: 14px;
  }
  
  .icon {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    display: inline-block;
    background-color: #f0f0f0;
    border-radius: 50%;
  }
  
  .text-orange {
    color: #ff6900;
  }
  
  .text-gray {
    color: #999;
  }
  
  .text-sm {
    font-size: 12px;
  }
  
  .text-xs {
    font-size: 10px;
  }
  
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    z-index: 10;
  }
  </style>